<template>
  <div class="virtual-lab-container">
    <h2 class="lab-title">铁与硫酸铜溶液的反应</h2>

    <div class="scene-wrapper">
      <div
        class="reagent-source"
        v-if="isReagentVisible"
        draggable="true"
        @dragstart="handleDragStart"
      >
        <div class="iron-nail-source"></div>
        <span>拖动此铁钉</span>
      </div>
      <div v-else class="reagent-source-placeholder"></div>

      <div class="experiment-scene">
        <div
          class="beaker"
          @dragover.prevent
          @drop.prevent="handleDrop"
        >
          <div class="solution" :style="{ 'background-color': solutionColor }"></div>

          <div v-if="isNailDropped" class="iron-nail-in-beaker">
            <div class="copper-deposit" :class="{ visible: isCopperDeposited }"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-panel">
      <p><strong>实验现象:</strong> {{ phenomenonText }}</p>
      <p>Fe + CuSO₄ = FeSO₄ + Cu</p>
      <button @click="resetExperiment" :disabled="experimentState !== 'idle' && experimentState !== 'finished'">
        重置实验
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// --- 状态管理 ---
const experimentState = ref('idle'); // 'idle', 'running', 'finished'
const isReagentVisible = ref(true);
const phenomenonText = ref('请将左侧的铁钉拖入烧杯中。');

// --- 现象控制 ---
const isNailDropped = ref(false);
const isCopperDeposited = ref(false); // 铁钉上是否析出铜
// A more aesthetic blue and green that fit the theme
const initialSolutionColor = '#a7d8e8'; // Light Sky Blue (Copper Sulfate)
const finalSolutionColor = '#d0f0c0';   // Tea Green (Ferrous Sulfate)
const solutionColor = ref(initialSolutionColor);

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

function handleDragStart(event) {
  event.dataTransfer.setData('reagent', 'iron_nail');
}

async function handleDrop(event) {
  const reagent = event.dataTransfer.getData('reagent');
  if (reagent === 'iron_nail' && experimentState.value === 'idle') {
    isReagentVisible.value = false;
    await startExperiment();
  }
}

async function startExperiment() {
  experimentState.value = 'running';

  phenomenonText.value = '将一根铁钉放入蓝色的硫酸铜溶液中...';
  isNailDropped.value = true;
  await delay(2000);

  phenomenonText.value = '铁钉表面逐渐有红色固体析出，溶液颜色由蓝色变为浅绿色。';
  solutionColor.value = finalSolutionColor; // Animate color change
  isCopperDeposited.value = true; // Animate copper appearing
  await delay(5000); // Wait for animations to complete

  phenomenonText.value = '反应结束。红色固体为铜，溶液为硫酸亚铁溶液。';
  experimentState.value = 'finished';
}

function resetExperiment() {
  experimentState.value = 'idle';
  isReagentVisible.value = true;
  isNailDropped.value = false;
  isCopperDeposited.value = false;
  solutionColor.value = initialSolutionColor;
  phenomenonText.value = '请将左侧的铁钉拖入烧杯中。';
}
</script>

<style scoped>
/* --- Generic Lab Styling (Consistent with Sodium experiment) --- */
.virtual-lab-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fdfdfd;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.lab-title {
  text-align: center;
  color: #334e68;
  margin-top: 0;
  margin-bottom: 20px;
}
.scene-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  flex-grow: 1;
}

/* --- Reagent & Placeholder --- */
.reagent-source {
  text-align: center;
  cursor: grab;
  color: #486581;
}
.reagent-source:active {
  cursor: grabbing;
}
.reagent-source-placeholder {
  width: 150px; /* Prevents layout shift */
  flex-shrink: 0;
}
.reagent-source, .reagent-source-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 250px; /* Match beaker height */
  padding-bottom: 10px; /* Align text nicely */
}

/* --- Experiment Scene & Beaker --- */
.experiment-scene {
  position: relative;
}
.beaker {
  width: 200px;
  height: 250px;
  border: 4px solid #829ab1;
  border-top: none;
  border-radius: 0 0 20px 20px;
  position: relative;
  overflow: hidden;
  background-color: rgba(224, 230, 237, 0.5); /* Semi-transparent background */
}

/* --- Info Panel & Controls --- */
.info-panel {
  margin-top: 20px;
  padding: 15px;
  text-align: center;
  background-color: #f0f4f8;
  border-radius: 8px;
}
.info-panel p {
  margin: 8px 0;
  color: #486581;
}
.info-panel button {
  margin-top: 10px;
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  background-color: #e74c3c;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}
.info-panel button:disabled {
  background-color: #a0a0a0;
  cursor: not-allowed;
}
.info-panel button:hover:not(:disabled) {
  background-color: #c0392b;
}
.info-panel button:active:not(:disabled) {
  transform: scale(0.98);
}


/* --- Specific Styles for Iron Nail Reaction --- */

.iron-nail-source {
  width: 15px;
  height: 80px;
  background-color: #bdc3c7; /* Iron gray */
  border: 1px solid #7f8c8d;
  border-radius: 2px 2px 0 0;
  margin-bottom: 10px;
  position: relative;
  /* Simple nail head */
  &:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -5px;
    width: 25px;
    height: 6px;
    background-color: #bdc3c7;
    border: 1px solid #7f8c8d;
    border-radius: 2px;
  }
}

.solution {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 65%; /* Solution level */
  border-radius: 0 0 16px 16px;
  transition: background-color 5s ease-in-out;
}

.iron-nail-in-beaker {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 15px;
  height: 190px; /* Taller to stick out of the water */
  background-color: #bdc3c7;
  border: 1px solid #7f8c8d;
  border-radius: 2px 2px 0 0;
  /* Drop-in animation */
  animation: drop-in 0.8s ease-out forwards;
  /* Simple nail head */
  &:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -5px;
    width: 25px;
    height: 6px;
    background-color: #bdc3c7;
    border: 1px solid #7f8c8d;
    border-radius: 2px;
  }
}

@keyframes drop-in {
  from {
    transform: translate(-50%, -250px) rotate(-15deg);
  }
  to {
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.copper-deposit {
  position: absolute;
  bottom: 0;
  left: -1px; /* Cover the border */
  width: calc(100% + 2px);
  height: 65%; /* Covers the part of the nail submerged in the 65% height solution */
  background-color: #e74c3c; /* Copper red */
  opacity: 0;
  transition: opacity 3s ease-in 1.5s; /* Delay appearance slightly */
}

.copper-deposit.visible {
  opacity: 0.85;
}

</style>